<template>
  <div class="recommend-view" v-if="problem">
    <!-- 题目信息 -->
    <div class="problem-header">
      <div class="problem-info">
        <!-- 修改题号为超链接 -->
        <h2>
          <a :href="getProblemLink(problem.problem_number)" target="_blank">
            {{ problem.problem_number }}: {{ problem.problem_name }}
          </a>
        </h2>
        <span :class="difficultyClass(problem.difficulty_index)">
          {{ problem.difficulty }}
        </span>
      </div>
      <div class="tags-dropdown">
        <button @click="toggleTags">标签</button>
        <div v-if="showTags" class="tags-list">
          <span v-for="tag in problem.tags" :key="tag.index" class="tag">
            {{ tag.tag_name }}
          </span>
        </div>
      </div>
    </div>

    <div class="content-response-wrapper">
      <!-- 题目内容 -->
      <div class="problem-content">
        <div v-html="renderedMarkdown" class="markdown-content"></div>
      </div>

      <!-- 响应按钮 -->
      <div class="response-buttons">
        <!-- 可展开的按钮菜单 -->
        <div class="dropdown" @mouseleave="closeMenu">
          <button class="response-button" @mouseenter="openMenu" @click="sendResponse(status = 'AC' )">{{ 'AC' }}</button>
          <div v-show="showMenu" class="dropdown-content" @mouseenter="openMenu" @mouseleave="closeMenu">
            <button
              v-for="status in filteredStatuses"
              :key="status"
              @click="sendResponse(status)"
              class="response-button"
            >
              {{ status }}
            </button>
          </div>
        </div>

        <!-- 单独的 'SKIP' 按钮 -->
        <button @click="sendResponse(skipStatus)" class="response-button">{{ skipStatus }}</button>

        <!-- 新增的提交标签修改按钮 -->
        <button @click="navigateToSubmitTag" class="submit-tag-button">
          提交标签修改
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/axios';
import MarkdownIt from 'markdown-it';
import markdownItKatex from 'markdown-it-katex';
import 'katex/dist/katex.min.css';

export default {
  name: 'RecommendView',
  data() {
    return {
      problem: null,
      problemContent: '',
      renderedMarkdown: '',
      showTags: false,
      skipStatus: 'SKIP',
      statuses: ['AC', 'WA', 'RE', 'CE', 'TLE', 'MLE', 'PE', 'OLE'],
      showMenu: false,
      lastSelectedStatus: null,
    };
  },
  computed: {
    filteredStatuses() {
      return this.statuses.filter(status => status !== 'AC');
    }
  },
  methods: {
    async fetchProblem() {
      try {
        const response = await axios.get('/api/recommendation_pool/get_problem_of_pool_queue/');
        this.problem = response.data.problem;
        this.fetchProblemContent(this.problem.problem_number);
      } catch (error) {
        console.error('获取题目失败:', error);
        alert('无法获取推荐的题目，请重试。');
      }
    },
    async fetchProblemContent(problemNumber) {
      try {
        const response = await axios.get(`/api/problems/problem_content/${problemNumber}/`);
        this.problemContent = response.data;

        const md = new MarkdownIt().use(markdownItKatex);
        this.renderedMarkdown = md.render(this.problemContent);

        console.log(this.renderedMarkdown);
      } catch (error) {
        console.error('获取题目内容失败:', error);
        alert('题目内容无法加载，请重试。');
      }
    },
    async sendResponse(status) {
      try {
        const response = await axios.post('/api/recommendation_pool/response_problem_of_pool_queue/', { status });
        console.log(response.data.message || '响应成功！');
        this.fetchProblem();
      } catch (error) {
        console.error('响应失败:', error);
        alert('响应失败：' + (error.response?.data?.error || '未知错误'));
      }
    },
    openMenu() {
      this.showMenu = true;
    },
    closeMenu() {
      this.showMenu = false;
    },
    toggleTags() {
      this.showTags = !this.showTags;
    },
    difficultyClass(difficultyIndex) {
      return {
        'difficulty-low': difficultyIndex <= 2,
        'difficulty-medium': difficultyIndex > 2 && difficultyIndex <= 5,
        'difficulty-high': difficultyIndex > 5,
      };
    },
    // 新增的跳转方法
    navigateToSubmitTag() {
      this.$router.push({
        name: 'SubmitTagData',
        query: { problem_number: this.problem.problem_number },
      });
    },
    // 获取题目链接的方法
    getProblemLink(problemNumber) {
      return `https://www.luogu.com.cn/problem/${problemNumber}`;
    }
  },
  mounted() {
    this.fetchProblem();
  },
};
</script>

<style scoped>
/* 页面主容器 */
.recommend-view {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 去掉超链接下划线 */
a {
  text-decoration: none;
}

/* 题目信息 */
.problem-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.problem-info h2,
.problem-info span {
  display: inline-block;
  text-align: center;
}

.problem-info h2 {
  font-size: 24px;
  margin-right: 10px;
}

.problem-info span {
  font-size: 18px;
  margin-right: 20px;
}

/* 按难度设置颜色 */
.difficulty-low {
  background-color: #d4edda;
  color: #155724;
  padding: 5px 10px;
  border-radius: 4px;
}

.difficulty-medium {
  background-color: #fff3cd;
  color: #856404;
  padding: 5px 10px;
  border-radius: 4px;
}

.difficulty-high {
  background-color: #f8d7da;
  color: #721c24;
  padding: 5px 10px;
  border-radius: 4px;
}

/* 标签下拉菜单 */
.tags-dropdown {
  position: relative;
}

.tags-dropdown button {
  padding: 10px 15px;
  background-color: #f2f2f2;
  color: #333333;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tags-dropdown button:hover {
  background-color: #c1c1c1;
}


.tags-list {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.tag {
  display: inline-block;
  padding: 5px;
  background-color: #e3f2fd;
  color: #007bff;
  margin: 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.content-response-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 题目内容 */
.markdown-content {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #ddd;
  max-height: 400px;
  width: 680px;
  overflow-y: auto;
  text-align: left; /* 添加此行来防止内容居中 */
}

.katex {
  display: inline-block;
}

/* 响应按钮 */
.response-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 20px;
  gap: 10px;
}

.response-button {
  margin: 5px;
  padding: 8px 12px;
  background-color: rgb(51, 152, 219);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.response-button:hover {
  background-color: rgb(0, 86, 179);
}

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.dropdown-content button {
  display: block;
  width: 100%;
  background-color: rgb(51, 152, 219, 0.7);
  margin: 5px 0;
}


/* 新增的提交标签修改按钮 */
.submit-tag-button {
  padding: 10px 15px;
  background-color: #ff9800;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-tag-button:hover {
  background-color: #e68900;
}

</style>


